import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12

import "functions.js" as Utils

Page {
    ColumnLayout {
        z: 11
        id: info_panel_grid
        anchors.fill: parent
        RowLayout {
            Layout.fillHeight: true
            Layout.fillWidth: true
            InfoPanel {
                id: info_methanal_panel
                Layout.fillHeight: true
                Layout.fillWidth: true
          infoIcon.source: "./Images/drawable/Methanal.png"
                infoName.text: "甲醛"
                infoData.text: "{{data_methanal}}" + " μg/m³"
            }
            InfoPanel {
                id: info_carbon_dioxide_panel
                Layout.fillHeight: true
                Layout.fillWidth: true
                infoName.text: "二氧化碳"
                infoData.text: "{{data_carbon_dioxide}}" + " ppm"
            }
        }
        RowLayout {
            Layout.fillHeight: true
            Layout.fillWidth: true
            InfoPanel {
                id: info_pm10_panel
                Layout.fillHeight: true
                Layout.fillWidth: true
                infoName.text: "PM10"
                infoData.text: "{{data_pm10}}" + " μg/m³"
            }
            InfoPanel {
                id: info_pm25_panel
                Layout.fillHeight: true
                Layout.fillWidth: true
                infoName.text: "PM2.5"
                infoData.text: "{{data_pm25}}" + " μg/m³"
            }
        }
        RowLayout {
            Layout.fillHeight: true
            Layout.fillWidth: true
            InfoPanel {
                id: info_tvoc_panel
                Layout.fillHeight: true
                Layout.fillWidth: true
                infoName.text: "总挥发性有机物"
                infoData.text: "{{data_tvoc}}" + " μg/m³"
            }
            InfoPanel {
                id: info_smoke_panel
                Layout.fillHeight: true
                Layout.fillWidth: true
                infoName.text: "可燃性气体"
                infoData.text: "{{data_smoke}}" + " μg/m³"
            }
        }
        RowLayout {
            Layout.fillHeight: true
            Layout.fillWidth: true
            InfoPanel {
                id: info_temperature_panel
                Layout.fillHeight: true
                Layout.fillWidth: true
                infoName.text: "温度"
                infoData.text: "{{data_temperature}}" + " ℃"
            }
            InfoPanel {
                id: info_humidity_panel
                Layout.fillHeight: true
                Layout.fillWidth: true
                infoName.text: "湿度"
                infoData.text: "{{data_humidity}}" + " %RH"
            }
        }
    }
}
